<template>
    <div>
        <div class="wdp-3">
            <template v-if="viewShow.id">
                <app-task-redirect
                        ref="noRun"
                        v-show="active == 'noRun'"
                        @detailFromBusiness="detailFromBusiness"
                        :viewShow="viewShow"
                        :title="appName"
                        myInstanceClassify="noRun"/>
                <app-task-redirect
                        ref="start"
                        v-show="active == 'start'"
                        @detailFromBusiness="detailFromBusiness"
                        :viewShow="viewShow"
                        :title="appName"
                        myInstanceClassify="start"/>
                <app-task-redirect
                        ref="participate"
                        v-show="active == 'participate'"
                        @detailFromBusiness="detailFromBusiness"
                        :viewShow="viewShow"
                        :title="appName"
                        myInstanceClassify="participate"/>

                <div class="add" v-if="addFlowButton.openType">
                    <van-button icon="plus" @click="addFromBusiness"></van-button>
                </div>
            </template>

            <!--TabBar区域-->
            <van-tabbar v-model="active">
                <van-tabbar-item name="noRun" icon="records">未启动</van-tabbar-item>
                <van-tabbar-item name="start" icon="todo-list-o">我发起</van-tabbar-item>
                <van-tabbar-item name="participate" icon="orders-o">我参与</van-tabbar-item>
            </van-tabbar>
        </div>

        <flow-approve ref="flowApprove" @refresh="loadList"></flow-approve>
    </div>
</template>

<script>

    import AppTaskRedirect from './AppTaskRedirect';
    import flowApprove from "../bpmTask/flowApprove";

    export default {
        name: 'appTaskList',
        components: {
            AppTaskRedirect,
            flowApprove,
        },
        data() {
            return {
                active: 'start',
                appId: this.$route.params.id,
                appName: null,
                addFlowButton: {},
                detailFlowButton: {},
                viewShow: {},
                url: {
                    getMobileViews: '/api/eform/engine/viewEngine/getMobileViews',
                    getProcessDefListByFormCode: '/api/bpm/bpm-front/displayRest/getProcessDefListByFormCode/v1',
                },
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$mask.open();
                this.$http.get(this.url.getMobileViews, {
                    params: {
                        appId: this.appId,
                    }
                }).then((res) => {
                    if (!res.result || !res.result.id) {
                        this.$notify({type: 'warning', message: '没有配置移动视图模型', duration: 2000,});
                        this.close();
                    } else {
                        this.viewShow = res.result;
                    }
                    this.init();
                }).catch((err) => {
                    this.$notify({type: 'warning', message: '请求失败: ' + err, duration: 2000,});
                    this.close();
                }).finally(() => {
                    this.$mask.close();
                });
            },
            init() {
                this.appName = this.viewShow.viewName;
                const buttonShow = this.viewShow.buttonShow || [];
                this.addFlowButton = buttonShow.find(vo => vo.openType == 'handleAddFlow') || {};
                this.detailFlowButton = buttonShow.find(vo => vo.openType == 'handleDetailFlow') || {};
            },
            addFromBusiness() {
                const formCode = this.addFlowButton.formCode
                if (!formCode) {
                    this.$notify({type: 'warning', message: '没有配置关联表单', duration: 2000,});
                    return;
                }
                this.$mask.open();
                this.$http.get(this.url.getProcessDefListByFormCode, {
                    params: {formCode: formCode}
                }).then((res) => {
                    if (res.success) {
                        if (res.result.length == 0) {
                            this.$notify({
                                type: 'warning',
                                message: '没有找到formCode【' + formCode + '】对应的流程模板',
                                duration: 2000,
                            });
                        } else {
                            if (res.result.length > 1) {
                                this.$notify({
                                    type: 'warning',
                                    message: 'formCode【' + formCode + '】对应多个流程模板，默认选择一个',
                                    duration: 2000,
                                });
                            }
                            const processDefId = res.result[0].id;
                            this.$refs.flowApprove.addFromProcess(processDefId);
                        }
                    } else {
                        this.$notify({type: 'warning', message: res.message, duration: 2000,});
                    }
                }).catch((err) => {
                    this.$notify({type: 'warning', message: '请求失败: ' + err, duration: 2000,});
                }).finally(() => {
                    this.$mask.close();
                });
            },
            detailFromBusiness(formId) {
                if (!this.detailFlowButton.openType) {
                    return;
                }
                const formCode = this.detailFlowButton.formCode
                if (!formCode) {
                    this.$notify({type: 'warning', message: '没有配置关联表单', duration: 2000,});
                    return;
                }
                this.$refs.flowApprove.detailFromBusiness(formId, formCode);
            },
            loadList() {
                this.$refs.noRun.reLoad();
                this.$refs.start.reLoad();
                this.$refs.participate.reLoad();
            },
            close() {
                this.$router.push("/index");
            }
        }
    }
</script>
